<template>
   
  <el-table :data="classifyList.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column label="用户id" prop="user_id"> </el-table-column>
    <el-table-column label="用户姓名" prop="username"> </el-table-column>

    <el-table-column align="right">
      <!-- <el-input
               v-model="searchText"
              placeholder="请输入用户名按下回车进行搜索"
              style="width:300px;float:right"
              size="small"
               @keyup.enter.native="search"
          ></el-input> -->
      <template slot="header" slot-scope="scope">
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>

      <template slot-scope="scope">
               
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>


        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>

      <el-dialog class="dlg" style="width: 1000px;height: 1000px;" title="用户信息" :visible.sync="zdydialog"
        :append-to-body="true">
        <el-form :model="updateform" ref="FormRef">
          <el-form-item label="id" width="80px">
            <el-input class="dialog_input" v-model="updateform.user_id"></el-input>
          </el-form-item>
          <el-form-item label="用户名" width="80px">
            <el-input class="dialog_input" v-model="updateform.username"></el-input>
          </el-form-item>
          <el-form-item label="昵称" width="80px">
            <el-input class="dialog_input" v-model="updateform.nick"></el-input>
          </el-form-item>
          <el-form-item label="qq" width="80px">
            <el-input class="dialog_input" v-model="updateform.qq"></el-input>
          </el-form-item>
          <el-form-item label="电话" width="80px">
            <el-input class="dialog_input" v-model="updateform.tel"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" width="80px">
            <el-input class="dialog_input" v-model="updateform.email"></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>

        </div>
      </el-dialog>
    </el-table-column>
     
  </el-table>


</template>



<script>
import Axios from 'axios'

export default {

  components: {},
  data() {
    return {
      search: '',
      zdydialog: false,
      updateform: {
        userid: '',
        username: '',
        nick: '',
        qq: '',
        tel: '',
        email: '',
      },
      classifyList: [],
      // id,



    }
  },
  created() {
    this.getClassifyList();
    // this.GetDetails();
  },
  methods: {
    async getClassifyList() {
      const res = await this.$http.get('music/findAllUser');
      this.classifyList = res.data.data;
      console.log(this.classifyList);
    },

    handleEdit(index, row) {
      this.updateform = row;  // 将该行对象数据直接赋给form
      this.zdydialog = true; // 自定义对话框展示
    },
    async handleDelete(index, row) {

      // this.id = row.user_id;
      // console.log(row.user_id);
      // this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(async () => {
      let pp = new URLSearchParams();
      pp.append('userid', row.user_id);
      const res = await this.$http.post("music/deleteUserBean", pp)
      console.log(res);
      if (res.data.status == 0) {
        this.$message.success(res.data.msg);
        this.classifyList.splice(index, 1);
      } else {
        this.$message.error(res.data.msg);
      }
      //   this.classifyList.splice(index, 1)
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    submit() {
      this.$refs.FormRef.validate(async (valid) => {
        if (!valid) return;
        // const userid=window.sessionStorage.getItem("userid");
        // console.log(userid);
        // console.log(valid);t
        // console.log(this.form.username);
        let param = new URLSearchParams()
        param.append('userid', this.updateform.user_id);
        // console.log(this.updateform.userid);
        // console.log(this.updateform.user_id);
        param.append('username', this.updateform.username);
        param.append('nick', this.updateform.nick);
        param.append('qq', this.updateform.qq);
        param.append('tel', this.updateform.tel);
        param.append('email', this.updateform.email);
        const res = await this.$http.post("music/updateUserBean", param);
        console.log(res);

        if (res.data.status) return this.$message.error(res.data.msg);
        this.$data.loading = true;
        this.$message.success(res.data.msg);
        // 保存用户信息
        // console.log(res.data.data);


      });
      this.zdydialog = false;

    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.zdydialog = false;
    },
    // del(url,params){
    //     return new Promise( async (resolve, reject) => {
    //         await axios.delete("music/deleteUserBean", {
    //             userid
    //         }).then(res => {
    //             resolve(res.data)
    //         }).catch(err => {
    //             reject(err.data)
    //         })
    // })
    // }



  }


}
</script>
<style scoped>
.dlg {
  left: 20%;
  top: -10%;
  margin: 0px !important;

}
</style>
